<template>
  <div class="zhongchouGood" ref="wrap">
    <shade v-show="loadShow"/>
    <!-- 分享 -->
    <div class="shareWrap" v-show="shareIsShow" @click="hideShare">
      <img src="@/assets/share.png" alt="">
    </div>
    <!-- 公众号二维码 -->
    <div class="erweima_wrap" v-show="erweimaIsShow" @click.stop="hideErweima">
      <div>
        <img src="@/assets/erweima.jpg" alt="">
        <p>长按识别二维码，关注宏香馨公众号</p>
        <p>获取更多优惠商品信息</p>
      </div>
    </div>
    <!-- 头部图片 -->
    <div class="imgHead">
      <img :src="imgUrl" alt="">
    </div>
    <!-- 项目相关 -->
    <div class="projectInfo fff">
      <div>
        <!-- 项目状态 -->
        <span>进行中</span>
        <!-- <mt-badge size="small" color="#888">自定义颜色</mt-badge> -->
        <!-- 项目名称 -->
        <p>{{ name }}</p>
      </div>
    </div>
    <!-- 项目商品相关 -->
    <div class="goodInfo fff">
      <!-- 商品名称 -->
      <div class="goodName">
        <img src="@/assets/logo.jpg" alt="">
        宏香馨商城
      </div>
      <!-- 参与人数 -->
      <span class="countProson"><b>{{ numOfPeople }}</b>人已支持</span>
    </div>
    <div class="slogan fff">{{ feature }}</div>
    <!-- 进度条 -->
    <div class="project_progress_wrap fff">
      <div class="project_progress">
        <div ref="ppContent"></div>
      </div>
      <!-- 进度条指示标 -->
      <div class="plan" ref="badge"><span>{{ plan }}%</span></div>
    </div>
    <!-- 项目数据 -->
    <div class="projectData fff">
      <!-- 目标金额 -->
      <div class="target_amount">
        <span class="dataItem">{{ parseInt(target_amount) }}元</span>
        <span>目标金额</span>
      </div>
      <!-- 认筹金额 -->
      <div class="sell_amount">
        <span class="dataItem">{{ parseInt(sell_amount) }}元</span>
        <span>认筹金额</span>
      </div>
      <!-- 距认筹结束 -->
      <div class="dis_end">
        <span class="dataItem" ref="end">{{ day }}天{{ hour }}小时</span>
        <span>距认筹结束</span>
      </div>
    </div>
    <div class="container fff">
      <div class="tabbar_wrap" ref="tabbar">
        <div class="tabbar">
          <span :class="{linkAcrive : linkIndex == 1}" @click="tab(1)">商品介绍</span>
          <span :class="{linkAcrive : linkIndex == 2}" @click="tab(2)">众筹动态</span>
        </div>
      </div>
    </div>
    <detail v-show="linkIndex==1" :detail="htmlCode"/>
    <log v-show="linkIndex==2" :log="logs"/>
    <!-- 订单详情悬浮按钮 -->
    <router-link tag="div" to="/order" class="orderDesc">
      <span class="iconfont icon-dingdan"></span>
      <span to="/orders">我的订单</span>
    </router-link>
    <!-- 底部悬浮操作区 -->
    <div class="handle">
      <div class="share" @click="share">
        <span class="iconfont icon-fenxiang"></span>
        <span>分享</span>
      </div>
      <div class="star" @click="star">
        <span class="iconfont icon-shoucang"></span>
        <span>收藏</span>
      </div>
      <input type="button" value="去支持" @click="layerShow=true">
    </div>
    <div class="space_div"></div>
    <params-layer v-show="layerShow" @close="close" :goodInfo="goodInfo" :isWeixin="is_weixin" :numPeople="numOfPeople"></params-layer>
  </div>
</template>

<script>
import detail from "./compontent/goodDetails";
import log from "./compontent/orderLog";
import login from "@/utils/login";
import getCode from "@/utils/getCode";
import { countView, getZcGood, wxCodeLogin, getSign } from "@/api/index.js";
import getUrlParams from "@/utils/getUrlParams.js";
import paramsLayer from "./compontent/paramsLayer";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      loadShow: true,
      htmlCode: "",
      logs: [],
      linkIndex: 1,
      urlParams: {
        good_id: "",
        username: "",
        ad: "",
        platform: ""
      },
      erweimaIsShow: false,
      shareIsShow: false,
      goodInfo: {},
      layerShow: false,
      width: 0,
      name: "", //众筹项目名称
      feature: "", //标语
      imgUrl: "", //商品头图
      numOfPeople: "",
      target_amount: 1000, //目标金额
      sell_amount: 300, //认筹金额
      plan: 0, //进度百分比
      day: 0,
      hour: 0,
      code: "",
      tabbar: this.$refs.tabbar,
      is_weixin: true
    };
  },
  created() {
    console.log("4444444")
    console.log(this.urlParams.good_id)
    console.log("444444444444444")
    getUrlParams(this);
    login(this);
    getCode(this);
    wxCodeLogin(this.code).then(result => {
      if (result.data.success == "yes") {
        this.loadShow = false;
      }
    });
    getSign(location.href.split("#")[0]).then(res => {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名
        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
      });

      wx.error(function(res) {
      });
    });
    getZcGood(this.urlParams.good_id).then(result => {
      if(result.data.success == 'no') {
        this.$messagebox.alert(result.data.message);
        return false;
      }
      this.$store.commit("SETGOODINFO", result.data);
      this.goodInfo = result.data;
      this.imgUrl = result.data.image_list[1];
      this.htmlCode = result.data.detail;
      this.name = result.data.name;
      this.feature = result.data.feature;
      this.target_amount = result.data.price;
      this.sell_amount = result.data.buy_price;
      this.plan = parseInt(this.sell_amount / this.target_amount * 100);
      this.numOfPeople = result.data.buy_list.length;
      this.logs = result.data.buy_list;
      this.$refs.ppContent.style.width = this.plan > 100 ? 100 + "%" : this.plan + '%';
      this.$refs.badge.style.left = this.plan > 92 ? 90.5 + "%" : this.plan + '%';
      wx.ready(() => {
        wx.onMenuShareTimeline({
          title: this.name, // 分享标题
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.imgUrl, // 分享图标
          success: function() {
          },
          cancel: function() {
          }
        });
        wx.onMenuShareAppMessage({
          title: this.name, // 分享标题
          desc: this.feature, // 分享描述
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.imgUrl, // 分享图标
          type: "", // 分享类型,music、video或link，不填默认为link
          dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {
          },
          cancel: function() {
          }
        });
      });
      const now = new Date().getTime();
      const endDate = new Date(
        result.data.end_time.replace(/-/g, "/")
      ).getTime();
      var residue = (endDate - now) / 1000;
      this.day = Math.floor(residue / 3600 / 24) + "";
      this.hour = Math.floor((residue / 3600) % 24) + "";
      if (this.day < 0) {
        this.$refs.end.innerHTML = "活动已结束";
      }
      this.$store.commit("SETPAGEINFO", {
        title: this.name,
        description: this.feature
      });
      this.$store.commit("SETURLPARAMS", this.urlParams);
      var view = this.$store.state.urlParams;
      view.page_url = location.href;
      view.pid = this.urlParams.good_id;
      countView(view).then(result => {
        this.$store.commit("SETKEFUTEL", result.data.service_tel);
        this.loadShow = false;
      });
    });
  },
  methods: {
    close() {
      this.layerShow = false;
    },
    share() {
      this.shareIsShow = true;
      this.$refs.wrap.style.overflow = "hidden";
    },
    hideShare() {
      this.shareIsShow = false;
      this.$refs.wrap.style.overflow = "visible";
    },
    star() {
      this.erweimaIsShow = true;
      this.$refs.wrap.style.overflow = "hidden";
    },
    hideErweima() {
      this.erweimaIsShow = false;
      this.$refs.wrap.style.overflow = "visible";
    },
    tab(index) {
      switch (index) {
        case 1:
          this.linkIndex = 1;
          break;
        case 2:
          this.linkIndex = 2;
          break;
      }
    }
  },
  components: {
    paramsLayer,
    detail,
    log
  },
  watch: {
    width() {
      if (this.width >= 100) clearInterval(this.a);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.space_div{
  widows: 100%;
  height: 0.88rem;
}
.zhongchouGood {
  background-color: #e9e9e9;
  position: relative;
  // overflow: hidden;
  height: 100%;
  padding-bottom: to(85);
  .shareWrap {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 2;
    img {
      width: 100%;
      // position: absolute;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%, -50%);
    }
  }
  .erweima_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.65);
    div {
      background-color: #fff;
      width: to(500);
      height: to(620);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 100%;
      }
      p {
        font-size: to(26);
        text-align: center;
      }
    }
  }
  .imgHead {
    width: 100%;
    height: to(480);
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .projectInfo {
    width: 100%;
    div {
      display: -webkit-flex;
      width: 100%;
      flex-direction: row;
      position: relative;
      height: to(79);
      span {
        flex: 1;
        font-size: to(21);
        background-color: #df4e4c;
        padding: to(5);
        border-radius: to(6);
        color: white;
        line-height: to(25);
        text-align: center;
        // width: to(58);
        height: to(25);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-left: to(8);
      }
      p {
        margin: 0 !important;
        flex: 9;
        font-size: to(33);
        line-height: to(79);
        padding-left: to(100);
        font-weight: bold;
      }
    }
  }
  .goodInfo {
    height: to(40);
    line-height: to(20);
    display: -webkit-flex;
    height: to(59);
    .goodName {
      flex: 1;
      font-size: to(25);
      color: #434343;
      line-height: to(59);
      img {
        // float: left;
        width: to(24);
        height: to(24);
        border-radius: 50%;
        vertical-align: middle;
        margin-left: to(8);
      }
    }
    .countProson {
      text-align: right;
      flex: 1;
      font-size: to(25);
      color: #434343;
      line-height: to(59);
      padding-right: to(11);
      b {
        color: #c63d3d;
      }
    }
  }
  .slogan {
    line-height: to(59);
    font-size: to(23);
    color: #888;
    padding-left: to(8);
  }
  .project_progress_wrap {
    width: 100%;
    padding: to(20) to(10) to(40);
    box-sizing: border-box;
    position: relative;
    .plan {
      position: absolute;
      width: to(50);
      height: to(30);
      background-color: #c63d3d;
      top: to(10);
      right: 0;
      font-size: to(60);
      border-radius: to(10);
      border: 1px solid #c63d3d;
      // @include border(20, #c63d3d);
      // &:after {
      //   box-sizing: border-box;
      //   content: "  ";
      //   position: absolute;
      //   left: 0;
      //   top: 0;
      //   z-index: 1;
      //   width: 200%;
      //   height: 200%;
      //   border: 1px solid #c63d3d;
      //   -webkit-transform-origin: 0 0;
      //   transform-origin: 0 0;
      //   -webkit-transform: scale(0.5, 0.5);
      //   transform: scale(0.5, 0.5);
      //   border-radius: to(20);
      // }
      span {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        font-size: to(18);
        line-height: to(30);
        color: white;
        text-align: center;
      }
      // }
    }
    .project_progress {
      width: 100%;
      height: to(10);
      background-color: #fff;
      border: to(2) solid #c63d3d;
      border-radius: to(5);
      box-sizing: border-box;
      div {
        width: 50%;
        height: 100%;
        background-color: #e76060;
      }
    }
  }
  .projectData {
    display: flex;
    div {
      flex: 1;
      height: to(100);
      span {
        font-size: to(22);
        display: block;
        text-align: center;
        color: #888;
        line-height: to(40);
        &.dataItem {
          font-size: to(28);
          color: #000;
        }
      }
    }
  }

  .container {
    margin-top: to(12);
    .tabbar_wrap {
      padding: to(9) to(9);
      .tabbar {
        height: to(50);
        display: -webkit-flex;
        border-radius: to(5);
        position: relative;
        border: 1px solid #df4d4d;
        // @include border(10);
        overflow: hidden;
        span {
          flex: 1;
          font-size: to(23);
          text-decoration: none;
          line-height: to(50);
          text-align: center;
          color: #df4d4d;
          &.linkAcrive {
            background-color: #df4d4d;
            color: white;
          }
        }
      }
    }
  }
  .orderDesc {
    position: fixed;
    right: to(-30);
    bottom: to(227);
    border: 1px solid #ccc;
    // @include border(100,#ccc);
    border-right: 0;
    border-radius: to(50) 0 0 to(50);
    padding: 0 to(50) 0 to(20);
    height: to(70);
    line-height: 0;
    background-color: #fff;
    display: -webkit-flex;
    display: flex;
    span {
      font-size: to(25);
      line-height: to(70);
      flex: 4;
    }
    .iconfont {
      font-size: to(32);
      color: #c63d3d;
      flex: 1;
      margin-right: to(10);
    }
  }
  .handle {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: to(85);
    display: -webkit-flex;
    .share,
    .star {
      flex: 1;
      background-color: #fff;
      display: -webkit-flex;
      flex-direction: column;
      padding: to(8);
      .iconfont {
        color: #c63d3d;
      }
      // align-items: center;
      // justify-content: center;
      span {
        font-size: to(20);
        flex: 2;
        text-align: center;
        &.iconfont {
          flex: 3;
          font-size: to(42);
          // line-height: 100%;
        }
      }
    }
    .share {
      // @include border(1,#c8c8c8);
      border-right: 1px solid #c8c8c8;
    }
    input {
      flex: 5;
      background-color: #eb5454;
      border: 0;
      font-size: to(25);
      color: white;
      -webkit-appearance: none;
    }
  }
}
</style>
